:root {
  --color-primary: #76cfc5;
  --color-primary-dark: #3a8d8a;
  --color-secondary: #ffb400;
  --color-danger: #ec6664;
  --color-border: #e9ecef;
  --color-bg: #fff;
  --color-bg-alt: #f8fafc;
  --color-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --color-text: #333;
  --color-text-light: #666;
  --color-link: #76cfc5;
  --color-link-hover: #ffb400;
  --radius: 16px;
  --radius-sm: 12px;
  --gsc-btn-bg: linear-gradient(90deg, #76cfc5 0%, #ffb400 100%);
  --gsc-btn-color: #fff;
}

[data-theme='dark'] {
  --color-bg: #181c1f;
  --color-bg-alt: #23272a;
  --color-border: #2c333a;
  --color-text: #f8fafc;
  --color-text-light: #b0b8c1;
  --color-link: #76cfc5;
  --color-link-hover: #ffb400;
  --color-shadow: 0 8px 32px rgba(0,0,0,0.32);
  --gsc-btn-bg: linear-gradient(90deg, #76cfc5 0%, #ffb400 100%);
  --gsc-btn-color: #fff;
}

.gsc-main, .gsc-comment, .gsc-header, .gsc-comment-box {
  background: var(--color-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--color-shadow) !important;
}

.gsc-comment-content {
  color: var(--color-text) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.gsc-comment-author {
  color: var(--color-link) !important;
  font-weight: 700 !important;
}

.gsc-comment-timestamp {
  color: var(--color-text-light) !important;
  font-size: 0.9rem !important;
}

.gsc-comment-box button, .gsc-header-button, .gsc-comment-actions button {
  background: var(--gsc-btn-bg) !important;
  color: var(--gsc-btn-color) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(118, 207, 197, 0.15) !important;
  transition: all 0.2s;
}
.gsc-comment-box button:hover, .gsc-header-button:hover, .gsc-comment-actions button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.gsc-comment-box textarea {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
  font-size: 1rem !important;
  transition: border-color 0.2s;
}
.gsc-comment-box textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}

.gsc-comment-header img {
  border-radius: 50% !important;
  border: 2px solid var(--color-border) !important;
}

a {
  color: var(--color-link) !important;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-link-hover) !important;
} 